$(document).ready(function () {
  document.addEventListener("DOMContentLoaded", () => {
    const tabs = document.querySelectorAll(".tab-inner");

    tabs.forEach((tab) => {
      tab.addEventListener("click", () => {
        // 移除所有 tab 的 active 类
        tabs.forEach((t) => t.classList.remove("active"));
        // 给当前点击的 tab 添加 active 类
        tab.classList.add("active");
      });
    });
  });
  selectWorks();
});

function selectWorks() {
  // 从URL中获取id参数
  const urlParams = new URLSearchParams(window.location.search);
  const id = urlParams.get("bookId");
  console.log(id);

  if (!id) {
    console.error("未找到URL中的id参数");
    return;
  }

  $.ajax({
    type: "GET",
    url: "BookRed.do",
    data: {
      bookId: id,
    },
    success: function (data) {
      const book = data.data;
      console.log(book);

      // 创建书籍详情容器
      const $div = $('<div class="book-detail"></div>');

      // 创建头部导航和信息
      const $header = $('<div class="book-detail-header"></div>');
      $header.html(`
    <ul>
        <li>
            <a href="index.html" class="crumb-item">首页</a>
            <i class="iconfont icon-you"></i>
        </li>
        <li>
            <a href="" class="crumb-item">${book.bookTypeMajor}</a>
            <i class="iconfont icon-you"></i>
        </li>
        <li>
            <span class="bookName">${book.bookName}</span>
        </li>
    </ul>
    <div class="book-detail-info">
        <!-- 左边书籍信息 -->
        <div class="book-information">
            <div class="wrap-pic_01">
                <img src="${book.bookImg || "img/temp.jpg"}" alt="${
        book.bookName
      }">
            </div>
            <div class="wrap-txt">
                <div class="wrap-txt-div_01">
                    <span class="txt">${book.bookName}</span>
                    <span class="score">
                        9.1
                        <em>分</em>
                    </span>
                </div>
                <div class="wrap-txt-div_02">
                    <em class="em_01">${
                      book.is_finished === "1" ? "完结" : "连载中"
                    }</em>
                    <em class="em_02">
                        <em>签约作品</em>
                    </em>
                    <em class="em_03">
                        <a href="">${book.bookTypeMajor}</a>
                    </em>
                    <em class="em_03">
                        <a href="">${book.bookType}</a>
                    </em>
                </div>
                <div class="wrap-txt-div_03">
                    <span>
                        作者：
                        <em>
                            <a href="">${book.bookWriter}</a>
                        </em>
                    </span>
                    <span>
                        主角：
                        <em>${book.protagonist || "未知"}</em>
                    </span>
                </div>
                <div class="wrap-txt-div_04">
                    <span>
                        <em>${(book.wordCount / 10000).toFixed(2) || "0"}</em>
                        万字
                    </span>
                    <span>
                        <span class="line"></span>
                        <em>0.6</em>
                        万次阅读
                    </span>
                    <span>
                        <span class="line"></span>
                        <em>441.7</em>
                        万积累人气值
                    </span>
                </div>
                <div class="wrap-txt-div_05">
                    <span>更新至</span>
                    <span class="update-chapter-title">
                        <a href="">第${book.chapterId || "0"}章</a>
                    </span>
                    <span class="update-time">${formatDate(
                      book.updateTime
                    )}</span>
                </div>
                <div class="wrap-txt-div_06">
                <a href="novelWriting.html?bookId=${book.bookId}&bookName=${
        book.bookName
      }1&bookWriter=${book.bookWriter}">立即阅读</a>
                    <a href="">加入书架</a>
                </div>
            </div>
        </div>
        
        <!-- 右边作者信息 -->
        <div class="small_Window">
            <div class="author">
                <div class="wrap-pic_02">
                    <a href="">
                        <img src="img/wrapper/11540.jpg" alt="${
                          book.bookWriter
                        }">
                    </a>
                </div>
                <div class="wrap-info">
                    <div class="author-name">
                        <a href="">${book.bookWriter}</a>
                    </div>
                    <a href="" class="author-information-tag">
                        <div class="author-tag">
                            <div class="author-tag-pic">
                                <img src="img/wrapper/tag_writer_5star.png" alt="五星作家">
                            </div>
                        </div>
                    </a>
                </div>
            </div>
            <ul class="author-works-data-list">
                <li class="author-works-data-list-item">
                    <div class="num">
                        <em>3</em>
                        本
                    </div>
                    <div class="desc">作品总数</div>
                </li>
                <li class="author-works-data-list-item">
                    <div class="num">
                        <em>280.21</em>
                        万
                    </div>
                    <div class="desc">累计字数</div>
                </li>
                <li class="author-works-data-list-item">
                    <div class="num">
                        <em>701</em>
                        天
                    </div>
                    <div class="desc">创作天数</div>
                </li>
            </ul>
        </div>
    </div>
`);

      // 创建书籍简介部分
      const $body = $('<div class="book-detail-body"></div>');
      $body.html(`
    <div class="book-detail-content">
        <div class="qm-tab">
            <ul class="qm-tab-list">
                <li class="qm-tab-list-item">
                    <div class="tab-inner active">
                        <span class="special-span_01">作品介绍</span>
                    </div>
                </li>
                <li class="qm-tab-list-item">
                    <div class="tab-inner">
                        <span class="special-span_02">作品目录</span>
                        <span class="sub-txt">${book.chapterId || "0"}章</span>
                    </div>
                </li>
            </ul>
        </div>
        <div class="tab-content">
            <div class="l-col">
                <div class="l-col-txt">
                    <div class="qm-with-title-th">
                        <span>简介</span>
                    </div>
                    <div class="qm-with-title-tb">
                        <p>${book.bookIntroduction || "暂无简介"}</p>
                    </div>
                </div>
            </div>
        </div>
    </div>
`);

      // 辅助函数：格式化日期
      function formatDate(dateObj) {
        if (!dateObj) return "未知时间";

        // 月份映射
        const monthMap = {
          JANUARY: "01",
          FEBRUARY: "02",
          MARCH: "03",
          APRIL: "04",
          MAY: "05",
          JUNE: "06",
          JULY: "07",
          AUGUST: "08",
          SEPTEMBER: "09",
          OCTOBER: "10",
          NOVEMBER: "11",
          DECEMBER: "12",
        };

        const year = dateObj.year;
        const month = monthMap[dateObj.month] || "01";
        const day = String(dateObj.dayOfMonth).padStart(2, "0");

        return `${year}-${month}-${day} 00:00:00`;
      }

      // 将头部和内容添加到容器
      $div.append($header, $body);

      // 将容器添加到页面
      $(".wrapper").html($div);
    },
  });
}
